<template>
  <div class="home">
    <el-container>
      <el-aside width="200">
        <div class="logo"></div>
        <el-menu :collapse="Collapse" :default-active="$route.path">
          <qf-sub-menu :sideMenu='userRoutes'></qf-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <i :class="['iconfont','pic-menu',Collapse?'icon-zhankai':'icon-shouqizhankai']" @click="Collapse=!Collapse"></i>
          <h1 class="main-title">管理系统</h1>
          <div class="msg">
            <el-avatar class="photo" shape="square" :src="squareUrl"></el-avatar>
            <h3>VIP</h3>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
              {{userInfo.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>vip到期时间：2022年-9月-29日</el-dropdown-item>
                <el-dropdown-item divided command="invest">vip充值</el-dropdown-item>
                <el-dropdown-item divided command="mine">账号信息</el-dropdown-item>
                <el-dropdown-item divided command="product">项目管理</el-dropdown-item>
                <el-dropdown-item command="quit" divided>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{name:bread.name}" v-for="bread in breadcrumb" :key="bread.name">{{bread.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
  data(){
    return{
      Collapse: false
    }
  },
  computed:{
      ...mapState(['userInfo','userRoutes','breadcrumb']),
      squareUrl(){
          return this.userInfo.headimgurl?this.userInfo.headimgurl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
      }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //用户下拉菜单
    handleCommand(command){
      if(command=="quit"){
        localStorage.removeItem('crm-token')
        this.$router.push('/login')
        //刷新页面
        location.reload()
      }else if(command=="invest"){
        this.$router.push('/vipManager/invest')
      }else if(command=='mine'){
        this.$router.push('/mine')
      }else if(command=="product"){
        this.$router.push('/studentManager/product')
      }
    }
  }
}
</script>
<style>
@import url("../../assets/css/publicStyle.css");
.home {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  height: 100%;
  background: #4c67ff;
}
.logo {
  min-height: 60px;
  background: url("http://chst.vip:8081/stu2/img/logo.be8bbddf.png") center
      no-repeat,#4c67ff;
  background-size: 100px;
}
.list {
  width: 200px;
  min-height: 500px;
}
.list i,
.list-title,
.el-menu-item-group__title {
  color: #4e5bf8;
  font-size: 14px;
}
.subMenu span{
  margin-right: 20px;
}
.header {
  min-height: 60px;
  background: linear-gradient(to right, #556cfd, #5536e0);
  display: flex;
  justify-content: space-between;
}
.main-title {
  font-size: 30px;
  color: #fff;
  line-height: 60px;
}
.msg {
  display: flex;
}
.photo {
  width: 40px;
  height: 40px;
  margin-top: 10px;
}
.msg h3 {
  line-height: 60px;
  margin-left: 10px;
}
.el-dropdown-link{
  font-size: 20px;
  line-height: 60px;
  color: goldenrod;
  margin-left: 10px;
}
.el-dropdown-menu{
  font-size: 16px;
  color: #4c67ff;
}
.icon-title{
  font-size: 20px !important;
  margin-right: 10px;
}
.pic-menu {
  font-size: 50px !important;
  line-height: 60px;
  color: #fff;
  cursor: pointer;
}
</style>